<template>
    <div>

      <div>
        <div style="border: 1px;">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

            <el-menu-item index="1" ><img style="margin-left: 20px ;width: 150px;height: 50px" src="http://qpt0e0e6g.hb-bkt.clouddn.com/login.png"></el-menu-item>
            <el-menu-item index="2" style="margin-left: 10px;font-size: 18px">首页</el-menu-item>
            <el-menu-item index="3" style="margin-left: 10px;font-size: 18px">榜单</el-menu-item>
            <el-menu-item index="4"  style="margin-left: 10px;font-size: 18px">COS</el-menu-item>
            <el-menu-item index="5"  style="margin-left: 10px;font-size: 18px"@click="toredios">视频</el-menu-item>
            <el-menu-item index="6"  style="margin-left: 10px;font-size: 18px">问答</el-menu-item>
            <el-menu-item index="7">
              <el-input  style="width: 200px ;"
                         placeholder="搜索COS、视频、用户..."
                         v-model="input"
                         clearable >
              </el-input>  <el-button @click="sousuo()" style="height: 39px;" con="el-icon-search">搜索</el-button>
            </el-menu-item>
            <el-menu-item index="8" @click="tooneself()"  v-if="disUser" style="margin-left: 65px;font-size: 18px" >
              <template>
                <div class="demo-type" >
                  <el-avatar :size="50" :src="user.pic">
                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                  </el-avatar>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="9"  v-if="disUser" style="margin-left: 5px;font-size: 18px" @click="outlogin">退出</el-menu-item>
            <el-menu-item index="8" v-if="disUser1" style="margin-left: 65px;font-size: 18px" @click="tologin">登录</el-menu-item>
            <el-menu-item index="9"  v-if="disUser1" style="margin-left: 5px;font-size: 18px" @click="toregist()">注册</el-menu-item>

            <el-dropdown index="10" style="margin-left: 10px ;" >
              <el-button style="background-color: #ff6fa2;width: 100px;height: 50px;">
                <i class="el-icon-finished el-icon--right"style="font-size: 20px;align-content: center;color: aliceblue">发布</i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-circle-plus">图片</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click="tomvUp()">视频</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </el-menu>
        </div>
      </div>


      <div  style="margin-top: 30px">
      <el-row>
        <el-col :span="24"><template>
          <el-carousel indicator-position="outside" >
            <el-carousel-item v-for="(item,index)  in picList" :key="index" style="width: 1200px;height: 250px;margin-left: 80px">
              <el-image
                :src="item.pic"
                fit="fill"></el-image>
            </el-carousel-item>
          </el-carousel>
        </template></el-col>
      </el-row>
      </div>
<hr style="width:1300px; "/>

      <el-row>
        <el-col :span="18">
          <div class="grid-content bg-purple">

          <div style="margin-top: 40px" >
            <!--边框：border: 5px yellowgreen solid ; border: 1px red solid;-->

            <div style="width: 1100px">
              <el-row>
                <el-col :span="24">

                  <div class="grid-content bg-purple-dark" style="width: 100%;margin-left: 0px">
                    <el-row style="margin-left: 50px">

                      <el-col :span="6" v-for="(o, index) in shareList" :key="o.id" :offset="index > 0 ? 1 : 1">
                        <el-card :body-style="{ padding: '0px' }" >
                          <el-button class="button" @click="tomvshare(o.id)"><el-image style="height: 250px" :src="o.mvPic" class="image"></el-image></el-button>
                          <div style="padding: 10px;">
                            <span v-html="o.mvName"></span>
                            <div class="bottom clearfix" style="margin-left: 0px">
                              <el-button type="text" style="font-size: 14px; " class="button" @click="good(o.id)"><i class="el-icon-star-off" v-if="disgood"></i><i class="el-icon-star-on" v-if="disgood1"></i>{{ o.good }}点赞</el-button>
                              <el-avatar :size="10"  :src="user.pic" ></el-avatar><span >{{user.name}}</span>
                            </div>
                          </div>
                        </el-card>
                      </el-col>
                    </el-row>
                  </div>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="params.page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="params.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
          </div>


        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">
          <div style="margin-top: 40px" >

          <div >
            <el-row >
              <el-col :span="6">
                <div class="grid-content bg-purple-light" style="width: 300px;height: 300px;margin-top: 80px;background-color:#ffffff; ">
                  <span style="font-size: 18px;margin-left: -120px">全站热度榜</span>
                  <br>
                  <br>
                  <div style="width: 200px;height: 50px" v-for="o in redioScore" :key="o">
                    <div  style=""  @click="tomvshare(o.id)" class="block"><el-avatar :size="40" :src="o.mvPic"></el-avatar>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{o.mvName}}&nbsp&nbsp&nbsp&nbsp<span style="background-color: #ff9812 ;font-size: 10px">热</span></div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        </div></el-col>
      </el-row>

    </div>



</template>

<script>
  import axios from 'axios'
  axios.defaults.withCredentials=true
    export default {
        name: "index",
      data(){
        return{
          picList:[{id:1,pic:'https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/c0za6/9c09af20298d11eb8d0e2bb914467918.jpg~tplv-banciyuan-sq90.image'},{id:2,pic:'https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/17bkz/8064e230729911ebb238c984f2d05777.jpg~tplv-banciyuan-sq90.image'},{id:3,pic:'https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/4byo/230ed5b06a1e11ebbfa9db47d25aa4a8.jpg~tplv-banciyuan-sq90.image'}],
          currentDate: new Date(),
          activeIndex: '1',
          input: '',
          shareList:[],
          redioScore:[],
          visible: false,
          user:{},
          disUser:false,
          disUser1:true,
          disgood:true,
          disgood1:false,
          total:10,
          params:{
            size:5,
            page:1
          },
        }
      },
      methods:{
          //热度排行查询
        findAllRedioByScore:function(){
          axios.get("http://localhost/bcy-mvshare/redio/findAllRedioByScore").then(res=>{
            if (res.data.code==200){
              this.redioScore=res.data.data;
            }else if(res.data.code==206){
              alert(res.data.message)
              this.$router.push("login")
            }else {
              alert(res.data.message)
            }
          });
        },
        //个人信息查询
         findUserById:function(){
          axios.get("http://localhost/bcy-user/user/findUserById").then(res=>{
            if (res.data.code==200){
              this.user=res.data.data;
              this.disUser=true;
              this.disUser1=false;
            }else if(res.data.code==206){
              alert(res.data.message)
              this.$router.push("login")
            }else {
              alert(res.data.message)
            }
          });
        },
        handleSizeChange(val) {
          this.params.size=val;
          this.findAll();
        },
        handleCurrentChange(val) {
          this.params.page =val;
          this.findAll();
        },
        sousuo:function(){
          axios.get("http://localhost/bcy-search/search/findAll/"+this.input).then(res=>{
            if (res.data.code==200){
              this.shareList=res.data.data;
            }
          })
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        tomvUp:function(){
          this.$router.push("/mvUpload")
        },
        tomvshare:function(id){
           this.$router.push({name:'mvshare',params:{id:id}})
        },
        //分页展示查询全部
        findAll:function(){
          axios.get("http://localhost/bcy-mvshare/redio/findAllRedio/"+this.params.page+"/"+this.params.size).then(res=>{
            if (res.data.code==200){
              this.shareList=res.data.data;
              this.total=res.data.total;
            }
          })
        },
        good:function (id) {
          axios.post("http://localhost/bcy-mvshare/redio/addgood",{id:id}).then(res=>{
            if (res.data.code==200){
              this.disgood=false;
              this.disgood1=true;
              this.$message({
                type: 'success',
                message: '点赞成功!',
              });

            }else {

            }
          })
        },toindex:function(){
          this.$router.push("/")
        }, tologin:function(){
          this.$router.push("/login")
        } ,outlogin:function(){
          axios.get("http://localhost/bcy-user/user/outlogin").then(res=>{
            if (res.data.code==200){
              this.$message({
                type: 'success',
                message: '退出成功!',
              });
              this.$router.push("/login")
            }
          })

        }, toregist:function(){
          this.$router.push("/regist")
        }, toredios:function(){
          this.$router.push("/redios")
        },
        tooneself:function () {
          this.$router.push("/oneself")
        },
      },
      mounted() {
          this.findAll();
          this.findUserById();
          this.findAllRedioByScore();
      }
    }
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }


  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }


  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

</style>
